<template>
	<div class="ln-switch">
		<span
			class="unchecked-label"
			:class="{ 'is-active': props.value === props.uncheckedValue }"
			v-if="props.uncheckedLabel"
		>
			{{ props.uncheckedLabel }}
		</span>
		<n-switch v-bind="getBindValues" />
		<span
			class="checked-label"
			:class="{ 'is-active': props.value === props.checkedValue }"
			v-if="props.checkedLabel"
		>
			{{ props.checkedLabel }}
		</span>
	</div>
</template>

<script lang="ts" setup>
import { switchProps } from 'naive-ui';
import type { PropType } from 'vue';

const props = defineProps({
	...switchProps,
	checkedLabel: {
		type: String as PropType<string>,
		default: '',
	},
	uncheckedLabel: {
		type: String as PropType<string>,
		default: '',
	},
});

const getBindValues = computed(() => {
	return {
		...unref(props),
	};
});
</script>

<style lang="scss" scoped>
.ln-switch {
	display: flex;
	align-items: center;
	color: #737373;

	.unchecked-label {
		margin-right: 10px;
	}

	.checked-label {
		margin-left: 10px;
	}

	.is-active {
		color: #fff;
	}
}
</style>
